<script setup lang="ts">
import { defineVaDataTableColumns, useModal } from 'vuestic-ui'
import { AuthData, AuthStatus } from '../types'
import { PropType, computed, toRef } from 'vue'
import { Pagination, Sorting } from '../../../data/pages/authdata'
import { useVModel } from '@vueuse/core'
import { watch } from 'vue'
import UserPhoto from '../../../components/UserPhoto.vue'

const props = defineProps({
  dataType: {
    type: String as PropType<AuthStatus>,
    required: true,
  },
  data: {
    type: Array as PropType<AuthData[]>,
    required: true,
  },
  loading: { type: Boolean, default: false },
  pagination: { type: Object as PropType<Pagination>, required: true },
  sortBy: { type: String as PropType<Sorting['sortBy']>, required: true },
  sortingOrder: { type: String as PropType<Sorting['sortingOrder']>, required: true },
})
const statusText: Record<AuthStatus, string> = {
  '': '',
  reject: '已拒绝',
  approve: '已同意',
  waiting: '待审批',
}
const statusColors: Record<AuthStatus, string> = {
  '': '',
  reject: 'danger',
  approve: 'info',
  waiting: 'warning',
}
const emit = defineEmits<{
  (event: 'agree-data', data: AuthData): void
  (event: 'reject-data', data: AuthData): void
  (event: 'update:sortBy', sortBy: Sorting['sortBy']): void
  (event: 'update:sortingOrder', sortingOrder: Sorting['sortingOrder']): void
}>()

const dataType = toRef(props, 'dataType')
const data = toRef(props, 'data')
const sortByVModel = useVModel(props, 'sortBy', emit)
const sortingOrderVModel = useVModel(props, 'sortingOrder', emit)
// console.log(dataType)

watch(
  () => props.dataType,
  (newVal, oldVal) => {
    // console.log(newVal, oldVal)
  },
)
// const columnsArray = computed(() => {
//   if (dataType.value === 'agree' || dataType.value === '') {
//     return [
//       { label: '样本名称', key: 'name', sortable: true },
//       { label: '申请者', key: 'getter', sortable: true },
//       // { label: '图片数量', key: 'number', sortable: true },
//       { label: '描述', key: 'description', sortable: false },
//       { label: '用途', key: 'usage', sortable: true },
//       { label: '截止时间', key: 'deadline', sortable: true },
//       { label: ' ', key: 'actions', align: 'right' },
//     ]
//   } else {
//     return [
//       { label: '样本名称', key: 'name', sortable: true },
//       { label: '申请者', key: 'getter', sortable: true },
//       { label: '图片数量', key: 'number', sortable: true },
//       { label: '描述', key: 'description', sortable: false },
//       { label: ' ', key: 'actions', align: 'right' },
//     ]
//   }
// })
// // console.log(columnsArray)
// const columns = defineVaDataTableColumns(columnsArray)
const columns = defineVaDataTableColumns([
  { label: '审批', key: 'actions', align: 'left' },
  { label: '样本名称', key: 'name', sortable: true },
  { label: '申请者', key: 'getter', sortable: true },
  // { label: '图片数量', key: 'number', sortable: true },
  { label: '描述', key: 'description', sortable: false },
  { label: '状态', key: 'status', sortable: false },
  { label: '截止时间', key: 'deadline', sortable: true },
  { label: '申请原因', key: 'usage', sortable: true },
])

// const columns = defineVaDataTableColumns([
//   { label: '样本名称', key: 'name', sortable: true },
//   { label: '来源', key: 'owner', sortable: false },
//   { label: '图片数量', key: 'number', sortable: true },
//   { label: '描述', key: 'description', sortable: false },
//   { label: '状态', key: 'status', sortable: false },
//   { label: ' ', key: 'actions', align: 'right' },
// ])

const totalPages = computed(() => Math.ceil(props.pagination.total / props.pagination.perPage))

const { confirm } = useModal()
const onUserAgree = async (data: AuthData) => {
  const agreed = await confirm({
    title: '同意申请',
    message: `你确定要同意对“${data.name}”的申请吗?`,
    okText: '同意',
    cancelText: '取消',
    size: 'small',
    maxWidth: '380px',
  })

  if (agreed) {
    emit('agree-data', data)
  }
}
const onUserReject = async (data: AuthData) => {
  const agreed = await confirm({
    title: '拒绝申请',
    message: `你确定要拒绝对“${data.name}”的申请吗?`,
    okText: '拒绝',
    cancelText: '取消',
    size: 'small',
    maxWidth: '380px',
  })

  if (agreed) {
    emit('reject-data', data)
  }
}
</script>

<template>
  <VaDataTable
    v-model:sort-by="sortByVModel"
    v-model:sorting-order="sortingOrderVModel"
    :columns="columns"
    :items="data"
    :loading="$props.loading"
  >
    <template #cell(name)="{ rowData }">
      <div style="font-weight: bolder">
        {{ rowData.name }}
      </div>
    </template>
    <template #cell(getter)="{ rowData }">
      <div style="font-weight: bolder" class="flex items-center gap-2 ellipsis max-w-[230px]">
        <UserPhoto :user="rowData.getter" size="small" />
        {{ rowData.getter.name }}
      </div>
    </template>
    <template #cell(status)="{ rowData }">
      <VaBadge :text="statusText[rowData.status]" :color="statusColors[rowData.status as AuthStatus]" />
    </template>
    <template #cell(deadline)="{ rowData }">
      <div v-if="rowData.deadline" class="time">
        {{ rowData.deadline }}
      </div>
    </template>
    <template #cell(description)="{ rowData }">
      <span class="description">
        {{ rowData.description }}
      </span>
    </template>
    <template #cell(usage)="{ rowData }">
      <span class="description">
        {{ rowData.usage }}
      </span>
    </template>
    <template #cell(actions)="{ rowData }">
      <!-- <VaBadge
        v-if="rowData.status !== 'waiting'"
        :text="statusText[rowData.status]"
        :color="statusColors[rowData.status as AuthStatus]"
      /> -->
      <div class="flex justify-start gap-2">
        <VaButton
          v-if="rowData.status === 'waiting'"
          preset="primary"
          size="small"
          icon="mso-done"
          aria-label="同意申请"
          @click="onUserAgree(rowData as AuthData)"
        />
        <!-- @click="$emit('agree-data', rowData as AuthData)" -->
        <VaButton
          v-if="rowData.status === 'waiting'"
          preset="primary"
          size="small"
          icon="mso-close"
          color="danger"
          aria-label="拒绝申请"
          @click="onUserReject(rowData as AuthData)"
        />
      </div>
    </template>
  </VaDataTable>

  <div class="flex flex-col-reverse items-center justify-between gap-2 py-2 md:flex-row">
    <div>
      <b>{{ $props.pagination.total }} results.</b>
      Results per page
      <VaSelect v-model="$props.pagination.perPage" class="!w-20" :options="[15, 50, 100]" />
    </div>

    <div v-if="totalPages > 1" class="flex">
      <VaButton
        preset="secondary"
        icon="va-arrow-left"
        aria-label="Previous page"
        :disabled="$props.pagination.page === 1"
        @click="$props.pagination.page--"
      />
      <VaButton
        class="mr-2"
        preset="secondary"
        icon="va-arrow-right"
        aria-label="Next page"
        :disabled="$props.pagination.page === totalPages"
        @click="$props.pagination.page++"
      />
      <VaPagination
        v-model="$props.pagination.page"
        buttons-preset="secondary"
        :pages="totalPages"
        :visible-pages="5"
        :boundary-links="false"
        :direction-links="false"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.va-data-table {
  ::v-deep(.va-data-table__table-tr) {
    border-bottom: 1px solid var(--va-background-border);
  }
}

.time {
  font-size: 14px;
  color: #333;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #e7edf8;
}

.description {
  display: block; /* 或者 inline-block，根据需要选择 */
  width: 250px; /* 设置元素的固定宽度 */
  white-space: nowrap; /* 禁止文本换行 */
  overflow: hidden; /* 隐藏超出部分的文本 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
